<template>
  <div class="BoTopCom h100">
    <div class="top-menu icon-color fl" @click="toggleMenu">
      <span>
       
      </span>
    </div>
    <div>
      <el-select v-model="theme" placeholder="请选择系统主题" @change="toggleTheme">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: "default",
      options:[
        {
          value: "default",
          label: "默认主题（黑色）"
        },
        {
          value: "luomu",
          label: "薄暮主题（白色）"
        },
        {
          value: "jiangzi",
          label: "酱紫主题"
        },
        {
          value: "rimu",
          label: "日暮主题"
        }
      ],
    }
  },
  mounted() {
    // console.log(1);
  },
  methods: {
    toggleMenu() {
      this.$emit("toggleMenu");
    },
    toggleTheme() {
      // 主题切换
      // const target =this.$refs.appbox;
      // console.log(target);
      // this.$emit("toggleTheme", this.theme);
      document.getElementsByTagName('body')[0].className = 'theme-'+ this.theme;
      localStorage.setItem('theme',this.theme);
      // this.$router.go(0);
      // location.reload()
    }
  }
}
</script>